<template>
 <div ref='container' class='container'>
    <div>
      <!-- hot -->
      <div class="hot">
        <div class="hot-title">热门城市</div>
        <ul class="hot-list">
          <li class="hot-item"
           v-for="item in hotCities"
           @click="changeCityName(item.name)"
           >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <!-- sort -->
      <div class="sort">
        <div class="sort-title">字母排序</div>
        <ul class="sort-list">
          <li class="sort-item" 
          v-for="(val, key) in cities"
          @click="changeSort(key)">
            {{ key }}
          </li>
        </ul>
      </div>

      <!-- list -->
      <div class="list">
        <div v-for="(val, key) in cities"
        :ref='key'>
          <div class="list-title">{{ key }}</div>
          <ul class="list-list">
            <li class="list-item"
             v-for="item in val"
             @click="changeCityName(item.name)">
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
import BScroll from "better-scroll";
export default {
  props: ["cities", "hotCities", "cities"],
  data() {
    return {
     	scroll:''
    };
  },
  methods:{
      changeSort(sortName){
          this.scroll.scrollToElement(this.$refs[sortName][0])
      },
      changeCityName(cityName){
          this.changeCity(cityName)
          this.$router.push('/')
      },
      ...mapMutations(['changeCity'])
  },
  mounted() {
 let container = this.$refs['container'];
		this.scroll = new BScroll(container)
  }
};
</script>

<style scoped lang="stylus">
@import '~css/common.styl'
.container{
	position: absolute;
	overflow:hidden;
	left:0;
	right:0;
	bottom:0;
	top:.88rem;
	background:#f5f5f5;
}
.list-title{
    font-size: .26rem;
    color: #212121;
    padding: .3rem;
    font-weight: 700;
}
.list-list{
    overflow: hidden;
    position: relative;
    background: #fff;
    font-size: 22.4px;
}
.list-list::before{
    content: " ";
    position: absolute;
    height: 100%;
   width: 25%;
   left: 25%;
   border-left: .02rem solid rgb(59, 59, 59);
   border-right:  .02rem solid rgb(59, 59, 59);
}
.list-list::after{
    content: " ";
    position: absolute;
    height: 100%;
   width: 0%;
   left: 75%;
   border-left: .02rem solid rgb(59, 59, 59);
   /* border-right:  .02rem solid rgb(59, 59, 59); */
}
.list-item{
    textOverflow();
    
  position: relative;
    width: 25%;
    text-align: center;
    height: .9rem;
    line-height: .9rem;
    float: left;
    border-bottom: .02rem solid rgb(59, 59, 59);
}
// hot===============================
.hot-title{
    font-size: .26rem;
    color: #212121;
    padding: .3rem;
    font-weight: 700;

}
.hot-list{
    overflow: hidden;
    position: relative;
    background: #fff;
    font-size: 22.4px;
}
.hot-list::before{
    content: " ";
    position: absolute;
    height: 100%;
   width: 33.333%;
   left: 33.333%;
   border-left: .02rem solid rgb(59, 59, 59);
   border-right:  .02rem solid rgb(59, 59, 59);
}
.hot-item{
      position: relative;
    width: 33.333%;
    text-align: center;
    height: .9rem;
    line-height: .9rem;
    float: left;
    border-bottom: .02rem solid rgb(59, 59, 59);
}
// sort======================================
.sort-title {
  font-size: 0.26rem;
  color: #212121;
  padding: 0.3rem;
  font-weight: 700;
}
.sort-list {
  overflow: hidden;
  position: relative;
  background: #fff;
  font-size: 22.4px;
}
.sort-list::before {
  content: " ";
  position: absolute;
  height: 100%;
}
.sort-item {
  width: 16.666%;
  text-align: center;
  height: 0.9rem;
  line-height: 0.9rem;
  float: left;
}
</style>
